<template>
    <div>
        <el-card>
            <div>
                <el-form>
                    <el-form-item label="搜索">
                        <el-input class="input" placeholder="请输入管理员账号" v-model="key" clearable @clear="searchAdmin"></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchAdmin">搜索</el-button>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="isSuper">新增管理员</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="adminList"
                    border
                    style="width: 100%">
                    <el-table-column
                    type="index"
                    align="center"
                    width="50">
                    </el-table-column>
                    <el-table-column
                        prop="uid"
                        label="管理员uid"
                        align="center"
                        width="290">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="管理员账号"
                        align="center"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="管理员类别"
                        align="center"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row.role==1?'管理员':"超级管理员"}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="操作(撤销权限)"
                        align="center"
                        width="width">
                        <template slot-scope="scope">
                            <el-button type="text" @click="isModify(scope)">撤销</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        @prev-click="gotoPrePage"
                        @next-click="gotoNextPage"
                        :total="allPages">
                    </el-pagination>
                </div>
        </el-card>
        <el-dialog
            title="添加管理员"
            :visible.sync="dialog"
            width="600px">
            <div class="dialog">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="搜索">
                        <el-input class="input" v-model="user_key" placeholder="输入用户账号" clearable @clear="user_list=[]"></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchUser">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="user_list"
                    highlight-current-row
                    @current-change='selectedUser'
                    style="width: 100%">
                    <el-table-column
                        prop="uid"
                        label="用户uid"
                         align="center"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="用户账号"
                        align="center"
                        width="width">
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer">
                <!-- <el-button @click="dialog = false">取 消</el-button> -->
                <el-button type="primary" @click="isAdd" icon="el-icon-circle-plus-outline">确认添加</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getCookie} from '@/utils/cookie'
import {getAdminList,updateAuthority,searchAdmin,searchUser} from '@/api/admin'
export default {
    name:'permission',
    data() {
        return {
            key:'',//搜索关键词
            allPages:1,//总页数
            page:1,
            adminList:[],//管理员列表
            status:0,//网页状态
            dialog:false,//对话框状态
            user_key:'',//添加框里面的数据
            user_list:[],//用户搜索用户列表
            user:{},//将要添加的用户
        }
    },
    watch:{
        key(newValue){
            if(newValue==''){
                this.status = 0
                this.getAdminList()
            }
        },
        user_key(newValue){
            if(newValue==''){
                this.user_list = []
            }
        }
    },
    mounted(){
        this.getAdminList()
    },
    methods:{
        //验证是否为超级管理员，超级管理员才能添加管理员
        isSuper(){
            if(getCookie('role')==1){
                this.$message({
                   type:'error',
                   showClose:true,
                   duration:1000,
                   message:'权限不足'
                })
                return
            }
            this.dialog=true
        },
        //是否添加
        isAdd(){
            this.$confirm('是否将账号为'+this.user.username+'添加为管理员？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.addAdmin()
                }).catch(() => {
                    this.$message({
                       type:'warning',
                       showClose:true,
                       duration:1000,
                       message:'取消操作'
                    })
            })
        },
        //添加管理员
        addAdmin(){
            updateAuthority({
                username:this.user.username,
                isAdd:1,
            }).then(res=>{
                if(res.status==200){
                    this.$message({
                       type:'success',
                       showClose:true,
                       duration:1000,
                       message:'添加成功'
                    })
                    this.adminList.push(res.data.person)
                    this.user_key = ''
                    this.dialog = false
                }else{
                    this.$message({
                       type:'error',
                       showClose:true,
                       duration:1000,
                       message:'添加失败'
                    })
                }
            })
        },
        //选择的用户
        selectedUser(val){
            this.user = val
        },
        //获取管理员列表
        getAdminList(){
            getAdminList({
                page:this.page
            }).then(res=>{
                this.adminList = res.data.info
                this.allPages = Math.ceil(res.data.number/1)
            })
        },
        // 更新权限状态
        updateAuthority(admin,isAdd){
            updateAuthority({
                username:admin.row.username,
                isAdd,
            }).then(res=>{
                if(res.status==200){
                    this.$message({
                       type:'success',
                       showClose:true,
                       duration:1000,
                       message:'操作成功'
                    })
                    //表示撤销权限，需要删除列表中的该用户
                    if(isAdd==0){
                        this.adminList = this.adminList.filter(item=>{
                            return item.username != admin.row.username
                        })
                    }else{
                        this.adminList.push(res.data.person)
                    }
                }
            })
        },
        //询问是否撤销
        isModify(admin){
            if(getCookie('role')==1){
                this.$message({
                   type:'error',
                   showClose:true,
                   duration:1000,
                   message:'权限不足'
                })
                return
            }
            this.$confirm('撤销之后需要重新添加，确认撤销吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.updateAuthority(admin,0)
                }).catch(() => {
                    this.$message({
                       type:'warning',
                       showClose:true,
                       duration:1000,
                       message:'取消操作'
                    })
            })
        },
        //搜索管理员
        searchAdmin(){
            this.status = 1
            searchAdmin({
                page:this.page,
                key:this.key
            }).then(res=>{
                this.adminList = res.data.info
                this.allPages = Math.ceil(res.data.number/1)
            })
        },
        //搜索用户
        searchUser(){
            searchUser({
                key:this.user_key
            }).then(res=>{
                this.user_list = res.data.info
            })
        },
        // 用户点击下一页
        gotoNextPage(){
            this.page = this.page+1
            if(this.status==0){
                this.getAdminList()
            }else{
                this.searchAdmin()
            }
        },
        // 用户点击上一页
        gotoPrePage(){
            this.page = this.page-1
            if(this.status==0){
                this.getAdminList()
            }else{
                this.searchAdmin()
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.input{
    width: 300px;
}
.btn{
    margin-left: 15px;
}
//分页
.pagination{
    display: flex;
    margin-top: 20px;
    justify-content: center;
}

.dialog{

}
</style>